<template>
    <div class="main">
        <div class="top"></div>
        <div class="title">欢迎登录HCEM系统！</div>
        <section class="login">
            <div class="phone">
                <div class="phone_number">手机号</div>
                <van-cell-group inset>
                    <van-field v-model="phone" center clearable placeholder="输入手机号快捷登录">
                    </van-field>
                    <div></div>
                </van-cell-group>
            </div>
            <div class="code">
                <div class="code_number">验证码</div>
                <van-cell-group inset>
                    <van-field v-model="sms" center clearable placeholder="请输入验证码登录">
                        <template #button>
                            <van-button size="small" round type="primary">验证码</van-button>
                        </template>
                    </van-field>
                    <div></div>
                </van-cell-group>
            </div>
            <div class="login_button">
                <van-button type="primary" size="large" round>立即登录</van-button>
            </div>
        </section>
        <div class="footer">
            <p>登录即代表已阅读并同意
            <span class="service">《软件服务协议》</span>
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const sms = ref('')
const phone = ref('')
</script>

<style>
:root{
    --van-cell-border-color: #D9D9D9;
    }
</style>

<style scoped lang="scss">
.main {
    position: relative;

    .top {
        position: absolute;
        height: 199px;
        width: 375px;
        background: linear-gradient(180deg, #C8E7FF 0%, rgba(252, 254, 254, 0) 100%);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
    }

    .title {
        width: 100vw;
        padding: 143px 81px 0 20px;
        font-size: 28px;
    }

    .login {
        margin-top: 93px;
    }
    .code{
        margin-top: 25px;
        .code_number{
            margin-left:30px
        }
    }
    .phone {
       
        .phone_number {
            margin-left:30px;
            font-size: 20px;
            font-weight: 400;
            color: #1C2023;
            line-height: 28px;
        }
    }
    .login_button{
        padding: 0 20px;
        margin-top: 50px;
    }
    .footer{
        color: #999999;
        margin-top: 126px;
        font-size: 12px;
        text-align: center;
        .service{
            color:#2096F3 ;
        }
    }
}
</style>
